<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雇主的页面列表</title>

    <!--引入Vue组件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--引入Axios组件，用来发送异步http请求的-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 把json 数据转成form方式提交数据  后端方便获取数据 -->
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>

</head>
<body>

<div id="app">

    <el-button type="danger" @click="batchDel"><i class="el-icon-delete"></i> 批量删除  </el-button>
    <el-table
            :data="owners"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">

        <!-- 多选框 -->
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                label="编号"
                prop="id"
                width="180">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="username"
                width="180">
        </el-table-column>
        <el-table-column
                label="电话"
                prop="tel"
                width="180">
        </el-table-column>

        <el-table-column
                align="center"
                label="性别"
                prop="sex"
                width="180">

            <!-- 让你 进行自定义的 (插槽) -->
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.sex == '0' ? 'primary' : 'success'">
                    {{scope.row.sex == '0' ? "女":"男"}}
                </el-tag>
            </template>

        </el-table-column>

        <el-table-column
                label="身份证"
                prop="identity"
                width="180">
        </el-table-column>

        <el-table-column
                label="备注"
                prop="remarks"
                width="180">
        </el-table-column>

        <el-table-column label="操作">

            <!-- 自定义的区域 插槽-->
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
           el-pagination      组件组名称
           @size-change       页面大小变化触发的函数
           @current-change    页面变化的触发的函数
           current-page       当前页面
           page-sizes         分页的数据的每页的大小
           page-size          每页有几条数据
           total              总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 4, 6]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--
            el-dialog 弹出框
            title 标题
            :visible  属性绑定 是否显示
    -->
    <el-dialog title="编辑业主信息" :visible.sync="dialogFormVisible">
        <el-form :model="owner">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="owner.username"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="owner.tel"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio v-model="owner.sex" label="1">男</el-radio>
                <el-radio v-model="owner.sex" label="0">女</el-radio>
            </el-form-item>
            <el-form-item label="身份证" :label-width="formLabelWidth">
                <el-input v-model="owner.identity"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="owner.remarks"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateOwner">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            owners:[],
            dialogFormVisible: false,
            formLabelWidth: '120px',
            owner:{},
            multipleSelection:[],
            currentPage:1,
            pageSize:2,
            total:0
        },
        methods:{

            //页面变化触发的函数
            handleCurrentChange(val){
                console.log(val)
                //把修改后的 currentPage 重新赋值
                this.currentPage = val;
                this.pageQuery();
            },

            //页面大小变化触发的函数
            handleSizeChange(val){
                console.log(val)
                //把修改后的 pageSize重新赋值
                this.pageSize = val;
                this.pageQuery();
            },
            //多选框出发的函数
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //批量删除的函数
            batchDel(){
                // 提示 确认
                // 拿到所有的 选中数据id
                if (!this.multipleSelection.length > 0 ){
                    alert("选中数据再删除")
                    return;
                }
                let ids = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    ids.push(this.multipleSelection[i].id)
                }
                console.log(ids);
                //{1,2,3}
                // 最终结果：ids=1&ids=2&ids=3
                let result = Qs.stringify({ids},{arrayFormat:'repeat'})
                // 发送数据到服务器
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {   //确认的按钮
                     axios.post("/owner/batchdel",result).then(resp=>{
                         if (resp.data.code == 200){ //删除成功
                             // 删除成功提醒
                             this.$message({
                                 message: resp.data.msg,
                                 type: 'success'
                             });
                             //更新页面的数据
                             this.pageQuery()
                         }
                     })
                }).catch(() => {   //取消
                    alert("我确认取消...")
                });
            },

            pageQuery(){
                //字符串模板
                //          http://localhost:8080/owner/page?currentPage=1&pageSize=2
                axios.get(`/owner/page?currentPage=${this.currentPage}&pageSize=${this.pageSize}`).then(resp=>{
                    console.log(resp);

                    // resp.data 拿到封装的数据   后面的.data拿到 pageVo下面的data数据
                    this.owners = resp.data.data;
                    this.total = resp.data.total;

                })
            },

            //请求数据
            getData(){
                axios.get("/owner/query").then(resp=>{
                    this.owners = resp.data;
                })
            },
            //删除操作
            // 参数1：数组中的数据的下标,
            // 参数2：当前点击删除的这一样的 当前的obj对象
            //删除  1、拿到 id   2、把id发送到 服务器
            handleDelete(index, row){
                let id = row.id;
                /**
                 * axios.post("请求的url","请求携带数据到服务器")
                 *     携带的数据是 json格式 {键值对集合}
                 *  请求方式:
                 *     get     获取(所有的查询都是用get请求)
                 *     post    修改操作用post (删除、添加、修改)
                 */
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {   //确认的按钮
                     //发送请求
                    axios.get("/owner/del?id=" + id).then(resp=>{
                        console.log(resp.data);  //{"msg":"删除成功","code":"200"}
                        if (resp.data.code == 200){ //删除成功
                            // 删除成功提醒
                            this.$message({
                                message: resp.data.msg,
                                type: 'success'
                            });
                            //更新页面的数据
                            this.getData();
                        }else{
                            alert(resp.data.msg);
                        }
                    })
                }).catch(() => {   //取消
                    alert("我确认取消...")
                });
            },
            //修改操作
            handleEdit(index, row){
                //显示dialog
                this.dialogFormVisible = true;
                //把编辑的数据直接给到 this.owner 进行绑定就可以
                //把 row 对象转成json 字符串
                let str = JSON.stringify(row);
                this.owner = JSON.parse(str);
                //把sex 转成字符串  默认显示
                this.owner.sex= String(row.sex);
            },
            //更新操作
            updateOwner(){
                // json格式数据转换为字符串，如：id=1&identity=3412..
                let result = Qs.stringify(this.owner);
                axios.post("/owner/update",result).then(resp=>{
                    console.log(resp);
                    if (resp.data.code == 200){ //修改成功
                        //dialog 关闭
                        this.dialogFormVisible = false;
                        // 修改成功提醒
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        //更新页面的数据
                        this.pageQuery();
                    }
                })
            }
        },
        // vue 创建 会执行的方法
        created(){
            console.log("我初始化了...这里进行网页数据初始化")
            // this.getData();
            this.pageQuery();
        }
    })
</script>

</body>
</html>